<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-size="30">{{name}}</div>
			<div v-color="'orange'">{{name}}</div>
		</div>
		<div id="app2">
			<div v-size="30">{{name}}</div>
			<div v-color="'orange'">{{name}}</div>
		</div>
		<script type="text/javascript">
			// 注册一个全局自定义指令
			Vue.directive('size', {
				//只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
				bind(el, binding) {
					el.style.fontSize = binding.value + 'px';
				}
			})
			const vm1 = new Vue({
				el: '#app',
				data: {
					name: '张三',
					// orange: 'orange'
				},
				//
				directives: {
					color: {
						bind(el, binding) {
							el.style.color = binding.value;
						}
					}
				}
			})

			const vm2 = new Vue({
				el: '#app2',
				data: {
					name: '李四'
				}
			})
		</script>
	</body>
</html>
